﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html, body {
            margin: 0; height:100%
        }
        #leftPanel {
            float:left; width:150px; padding:2px 5px; height:100%;border-right:solid 3px gray
        }
        #rightPanel {
            float:left; width:500px; padding:5px; height:100%; min-width:500px
        }
        #leftPanel div {
            border-top: solid 1px groove; cursor:pointer ; line-height:25px
        }
            #leftPanel div:hover {
                background-color: wheat;
            }

        #txtOutput, #txtContent, #txtArea {
            width: 95%; margin-bottom:15px
        }

        #outputPanel {
            width: 500px;
        }
            #outputPanel .tab {
                display:inline-block; width: 60px
            }
    </style>
</head>
<body>
    <div id="leftPanel"></div>
    <div id="rightPanel">
        <div id="contentPanel" style="position:relative">
            <div>
                <span id="lbSample">Codes: </span>
                <button id="btnRun" style="margin-left:50px; position:absolute; right:20px;top:-5px">Compile & Run</button>
            </div>
            <textarea id="txtContent" rows="15"></textarea>
        </div>
        <div id="outputPanel">
            <div>Output:</div>
            <iframe id="txtOutput" style="width:95%;height:150px;"></iframe>
        </div>
    </div>
    
</body>
<script>
    var editor = document.getElementById("txtOutput").contentWindow;
    editor.document.designMode = 'On';
    editor.document.contentEditable = true;
    editor.document.open();
    editor.document.writeln('<html><head><style>');
    editor.document.writeln('.tab{display:inline-block; width: 60px}');
    editor.document.writeln('</style></head><body></body></html>');
    editor.document.close();
</script> 

</html>
